<template>
  <el-container class="main">
    <el-header class="header">
      <div class="logo">logo</div>
    </el-header>
    <el-container class="container">
      <el-aside width="200px">
        <el-menu class="menu" router background-color="#595c62" text-color="#f4f4f5" active-text-color="#409EFF" active-background-color="#ecf5ff" :default-active="$route.path">
          <template v-for="item in menus" :key="item.path">
            <el-sub-menu v-if="item.children" :index="item.path">
              <template #title>{{ item.name }}</template>
              <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path" :route="{ path: child.path }">
                {{ child.name }}
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item v-else :index="item.path" :route="{ path: item.path }">
              {{ item.name }}
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <el-main> <RouterView /></el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
const views = import.meta.glob('../views/**')
const menuMap = new Map()

Object.keys(views).forEach(key => {
  const path = key.replace(/\.vue$/, '').replace(/\.\.\/views\//, '')
  const parts = path.split('/')

  if (parts.length > 1) {
    const [parentPath, childPath] = parts
    const normalizedParent = parentPath.toLowerCase()
    if (!menuMap.has(normalizedParent)) {
      menuMap.set(normalizedParent, {
        path: `/${normalizedParent}`,
        name: parentPath,
        children: [],
      })
    }
    menuMap.get(normalizedParent).children.push({
      path: `/${normalizedParent}/${childPath.toLowerCase()}`,
      name: childPath,
    })
  } else {
    const routePath = path === 'home' ? '/' : `/${path.toLowerCase()}`
    menuMap.set(path, {
      path: routePath,
      name: path,
    })
  }
})

const menus = Array.from(menuMap.values())
console.log('Generated menus:', menus)
</script>

<style lang="scss" scoped>
.main {
  width: 100vw;
  height: 100vh;
}
.container {
  flex-grow: 1;
}
.menu {
  height: 100%;

  :deep(.el-menu-item) {
    &:hover {
      background-color: #ecf5ff66;
    }
    &.is-active {
      background-color: #ecf5ff !important;
    }
  }
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #b1b3b8;
}
.el-main {
  background-color: #f0f2f5;
}
</style>
